<template>
  <van-popup v-model:show="showPlayLists" round ref="playlistRef" :style="{ width: '90%', height: '80%' }">
    <div class="wrap">
      <h3>当前播放</h3>
      <div class="list">
        <div v-if="playList[0].musicId == 0">
          <van-empty description="歌单暂无歌曲" />
        </div>
        <div v-else>
          <li v-for="item, index in playList" :key="item.musicId" @click="changeSong(index)">

            <div class="name" :class="{ active: index == playListIndex }">
              <!-- <van-icon name="service-o" v-if="index == playListIndex" :color="'#FE3A3A'" /> -->
              <img class="nowplay" src="@/assets/images/loading.gif" v-if="index == playListIndex">
              <div class="music-name van-ellipsis">{{ item.musicName }}</div>
              <div class="al van-ellipsis" :class="{ active: index == playListIndex }">
                &nbsp;-&nbsp;{{ item.artists[0].name }}
              </div>
            </div>

            <div>
              <van-icon name="cross" size="22" @click.stop="delSong(index)" />
            </div>
          </li>
        </div>
      </div>
    </div>

  </van-popup>
</template>

<script setup>
import { reactive, toRefs, ref, onUpdated } from 'vue'
import { storeToRefs } from 'pinia'
import { PlayStore } from '@/store/playlist'
import { Toast } from 'vant';
const $playStore = PlayStore();
const { sotreChangeSong, sotreDelSong } = storeToRefs($playStore);
let { playList, playListIndex } = storeToRefs($playStore);
let showPlayLists = ref(false);

const emit = defineEmits(['onDelete'])

// 改变歌曲
const changeSong = (index) => {
  $playStore.sotreChangeSong(index)
}

onUpdated(() => {
  Toast.clear()
})

// 删除单曲
const delSong = (index) => {
  // 如果删除的正在播放歌曲，则播放下一首
  $playStore.sotreDelSong(index);
  emit('onDelete',playList.value[playListIndex.value].musicId);
}

defineExpose({
  showPlayLists
})
</script>
  
<style lang='less' scoped>
.van-popup {
  padding: 20px;
}

.van-icon {
  color: @font-fu;
}

.wrap {
  font-size: 30px;
  width: 100%;
  height: 100%;
  padding: 20px 30px;
  box-sizing: border-box;

  h3 {
    font-size: 50px;
    margin-bottom: 30px;
  }

  .list-option {
    margin-top: 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    li {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .van-icon {
        margin-right: 20px;

      }
    }
  }

  .list {
    margin-top: 40px;

    li {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      height: 100px;
      line-height: 100px;

      .name {
        width: 80%;
        display: flex;
        flex-wrap: nowrap;
        // justify-content: space-between;
        align-items: center;

        .music-name {
          // flex: 1;
          max-width: 70%;
        }

        .al {
          // width: 20%;
          font-size: 20px;
          color: @font-fu;
        }

        .nowplay {
          max-width: 30px;
          margin-right: 10px;
        }


      }


    }
  }
}
</style>